<template>
	<view class="center">
		<view class="center-list">
			<view class="header item-border-bottom item-border-top">
				<text class="list-text">头像</text>
				<view  class="uni-list-cell-navigate uni-navigate-right uni-triplex-right" >
					<image class="list-icon" :src="userInfo.avatarUrl"></image>						
				</view>
			</view>
			
			<view class="content">
				<view class="list-item item-border-top">
					<text class="list-text">姓名</text>
					<text class="list-detialText" v-if="!isedit">{{userInfo.name}}</text>
					<input class="list-detialText list-input" v-if="isedit" v-model="userInfo.name" />
				</view>
				
				<view class="list-item item-border-top">
					<text class="list-text">联系电话</text>
					<text class="list-detialText" v-if="!isedit">{{userInfo.phone}}</text>
					<input class="list-detialText list-input" v-if="isedit" v-model="userInfo.phone" />
				</view>
				
				<view class="list-item item-border-top">
					<text class="list-text">邮箱</text>
					<text class="list-detialText" v-if="!isedit">{{userInfo.email}}</text>
					<input class="list-detialText list-input" v-if="isedit" v-model="userInfo.email" />
				</view>
				
				<view class="list-item item-border-top">
					<text class="list-text">微信</text>
					<text class="list-detialText" v-if="!isedit">{{userInfo.weixin}}</text>
					<input class="list-detialText list-input" v-if="isedit" v-model="userInfo.weixin" />
				</view>
				
				<view class="list-item item-border-top item-border-bottom">
					<text class="list-text">邮编</text>
					<text class="list-detialText" v-if="!isedit">{{userInfo.code}}</text>
					<input class="list-detialText list-input" v-if="isedit" v-model="userInfo.code" />
				</view>
				
			</view>
			
			<view>
				<button class="edit-button" @click="goEdit">{{isedit ? '保存':'编辑资料'}}</button>
			</view>
			<view class="footer">
				<button class="loginout-button" @click="goOut">退出登录</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	
	export default {
		data(){
			return {
				isedit:false,
				userInfo:{
					avatarUrl:'/static/avatar.png',
					name:'',
					phone:'',
					email:'',
					weixin:'',
					code:''
				}
			}
		},
		onLoad (option) {
			console.log("option: " + JSON.stringify(option));
			if(this.hasLogin){
				this.getUserInfo();
			}
		},
		computed:{
			...mapState(['forcedLogin', 'hasLogin', 'token','usertype']) 
		},
		methods:{
			...mapMutations(['logout']),
			goEdit(){
				this.isedit = !this.isedit;
			},
			goOut(){
				this.logout();
				uni.reLaunch({
					url:'/pages/tabBar/template/template'
				})
			},
			//获取个人信息数据
			getUserInfo(){
				let that = this;
				let url = that.global_url + '/login/getUserInfo?token=' + that.token;
				uni.request({
					url:url,
					method:"POST",
					header:{'content-type':'application/json'},
					data:'',
					success: (res) => {
						console.log("res: " + JSON.stringify(res.data));
						if(res.data.status == 200){
							that.userInfo.avatarUrl = res.data.info.avatar;
							that.userInfo.name = res.data.info.nickname;
							that.userInfo.typeId = !res.data.info.type  ? 1 : res.data.info.type
							that.userInfo.userId = res.data.info.userId
							that.userInfo.type = that.setType(res.data.info.type);
							uni.setStorageSync('usertype', res.data.info.type);
							console.log("avatarUrl:"+that.userInfo.avatarUrl)
						}
					}
				})
			},
			setType(type){
				switch (type){
					case '1':
						return '普通用户'
					break;
					case '2':
						return '服务商Admin'
					break;
					case '3':
						return '服务商'
					break;
					case '4':
						return '房产销售'
					break;
					case '5':
						return '房产中介Admin'
						break;
					case '6':
						return '澳乐居Admin'
					break;
					default:
						return '普通用户'
					break;
				}
			}
			
		}
	}
</script>

<style>
	page,
	view{
		display: flex;
	}
	page{
		background-color: #FAFCFC;
	}
	.center{
		/* background-color: #FAFCFC; */
	}
	.center-list{
		flex-direction: column;
	}
	.item-border-top{
		border-top: 1rpx solid #F0F0F0;
	}
	.item-border-bottom{
		border-bottom: 1rpx solid #F0F0F0;
	}
	.header{
		flex-direction: row;
		align-items: center;
		background-color: #FFFFFF;
		margin-top: 30rpx;
		width: 750rpx;
		height: 130rpx;
	}
	.list-text{
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #636363;
	}
	.list-icon{
		width: 110rpx;
		height: 110rpx;
		margin-left: 60%;
		border-radius: 100%;
	}
	
	.content{
		margin-top: 25rpx;
		flex-direction: column;
	}
	.list-item{
		flex-direction: row;
		background-color: #FFFFFF;
		align-items: center;
		width: 750rpx;
		height: 100rpx;
	}
	.list-detialText{
		position: absolute;
		margin-left: 180rpx;
		margin-right: 20rpx;
		font-size: 28rpx;
		color: #CCCCCC;
	}
	.list-input{
		border: 1rpx solid #F0F0F0;
		color: #333;
		height: 70rpx;
		width: 70%;
	}
	.edit-button{
		margin: 50rpx 50rpx;
		flex: 1;
		height: 80rpx;
		background-color: #1177DB;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	.footer{
		align-items: center;
		/* font-size: 30rpx; */
	}
	
	.loginout-button{
		height: 80rpx;
		font-size: 30rpx;
		width: 60%;
	}
</style>
